<template>
  <div>
    <el-card>
      <div slot="header"
        :class="$style.header">
        <div :class="$style.search">
          <span>用户名：</span>
          <el-input v-model="name"
            clearable
            @clear="filterChange"></el-input>
        </div>
        <div :class="$style.search">
          <span>订单号：</span>
          <el-input v-model="order_number"
            clearable
            @clear="filterChange"></el-input>
        </div>
        <div :class="$style.search">
          <span>状态</span>
          <el-select v-model="select"
            placeholder="请选择"
            clearable
            @change="filterChange">
            <el-option v-for="item in stOptionList"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="block" :class="$style.search">
          <span class="demonstration">开始时间</span>
          <el-date-picker
            v-model="starttime"
            type="date"
            placeholder="开始时间">
          </el-date-picker>
        </div>
        <div class="block" :class="$style.search">
          <span class="demonstration">结束时间</span>
          <el-date-picker
            v-model="endtime"
            type="date"
            placeholder="结束时间">
          </el-date-picker>
        </div>
        <div :class="$style.search">
          <span>用户ID：</span>
          <el-input v-model="ID"
            clearable
            @clear="filterChange"></el-input>
        </div>
        <el-button type="primary"
          @click="filterChange">
          搜索<i class="el-icon-search"></i>
        </el-button>
      </div>

      <el-table :data="tableData"
        m-b-10>
        <el-table-column label="订单号" align="center">
          <template slot-scope="{ row }">
            {{row.order_sn}}
          </template>
        </el-table-column>
        <el-table-column label="订单总金额" align="center">
          <template slot-scope="{ row }">
            {{(parseFloat(row.orderfee)).toFixed(2)}}
          </template>
        </el-table-column>
        <el-table-column label="联系电话"
          align="center">
          <template slot-scope="{ row }">
            {{row.contact}}
          </template>
        </el-table-column>
        <el-table-column label="创建时间 "
          align="center">
          <template slot-scope="{ row }">
            {{row.create_time}}
          </template>
        </el-table-column>
        <el-table-column label="订单状态 "
          align="center">
          <template slot-scope="{ row }">
            {{state(row.is_pay)}}
          </template>
        </el-table-column>
        <el-table-column label="退单状态"
          align="center">
          <template slot-scope="{ row }">
            {{ row.refund_str}}
          </template>
        </el-table-column>
        <el-table-column label="操作"
        align="center"
        width="500px">
          <template slot-scope="{ row }">
            <el-button type="primary"
              size="mini"
              @click="details(row.id)">详 情</el-button>
            <el-button type="warning"
              size="mini"
              @click="ship(row)">发 货</el-button>
            <el-button type="danger"
              size="mini"
              @click="staff(row)">分配配送工</el-button>
            <el-button type="success"
              size="mini"
              @click="backMoney(row.id)">同意退款</el-button>
            <el-button type="warning"
              size="mini"
              @click="refuse(row.id)">拒绝退款</el-button>
          </template>
        </el-table-column>
      </el-table>

      <BasePagination :max="maxPage"
        :now.sync="nowPage"></BasePagination>

      <Details :info.sync="detailInfo"   ref="Details" />

      <OrderShip :info.sync='order' ref="OrderShip"  />
      <CourierSet ref="CourierSet" />
      <BackMoney ref="BackMoney" />
      <Refuse ref="Refuse"  />    
    </el-card>
  </div>
</template>

<script>
import BasePagination from '@/components/BasePagination'
import Details from './components/Details'
import OrderShip from './components/OrderShip'
import CourierSet from './components/CourierSet'
import BackMoney from './components/BackMoney'
import Refuse from './components/Refuse'
export default {
  components: {
    BasePagination,
    Details,
    OrderShip,
    CourierSet,
    BackMoney,
    Refuse,
  },

  data() {
    return {
      tableData: [
        {
          label:"订单号",
          prop:'order_sn'
        },
        {
          label:"订单总金额",
          prop:'orderfee'
        },
        {
          label:"联系电话",
          prop:'contact'
        },
        {
          label:"创建时间",
          prop:'create_time'
        },
        {
          label:"订单状态",
          prop:'is_pay'
        },
        {
          label:"退单状态",
          prop:'refund_str'
        },
      ],
      stOptionList:'',
      detailInfo:'',
      order:'',
      search: '',
      select: '',
      date: [],
      maxPage: 1,
      nowPage: 1,
      order_number: '',
      name:'',
      ID:'',
      starttime:'',
      endtime:'',
    }
  },
  watch: {
    nowPage() {
      this.getData()
    }
  },

  created(){
    this.getData();
  },
  methods: {
    init(to, from) {
      this.getData()
    },
    filterChange() {},
    getData() {
      this.$http.get('/Manage/order/lists',{
        params:{
          page:this.nowPage,
          rows:10,
          keywords:this.order_number,
          member_id:this.ID,
          menber:this.name,
          is_pay:this.select,
          starttime:this.starttime,
          endtime:this.endtime
        }
      })
      .then(res=>{
        this.tableData = res.data.list;
        this.stOptionList = res.data.pay_screen;
        this.maxPage = res.data.page_total;
      })
    },

    filterChange() {
      this.nowPage === 1 ? this.getData() : (this.nowPage = 1)
    },

    details(data) {
      this.$http.get('/Manage/Order/info',{
        params:{
          id:data
        }
      })
      .then(res=>{
        this.detailInfo = res.data.info;
      })
      this.$refs.Details.isDialog = true
    },
    ship(data){
      this.order = data ;
      this.$refs.OrderShip.isDialog = true
    },
    // 分配配送工
    staff(data){
      this.$refs.CourierSet.isDialog = true
    },
    backMoney(data){
      this.$refs.BackMoney.isDialog = true
    },

    refuse(data){
      this.$refs.Refuse.isDialog = true
    },
   
  
    state(val) {
      if (val === 1) {
        return '已付款'
      } else if (val === 0) {
        return '未付款'
      }
    },
    backState(val) {
      if (val === 0) {
        return '审核中'
      } else if (val === 1) {
        return '已审核'
      }
    }
  }
}
</script>

<style lang="scss" module>
.header {
  display: flex;
  align-items: center;

  > div {
    flex-grow: 0;
    flex-shrink: 0;

    &:not(:last-child) {
      margin-right: 20px;
    }

    > span {
      margin-right: 5px;
    }
  }

  .search {
    display: flex;
    align-items: center;

    > div {
      width: 150px;
    }
  }

  [space] {
    flex-grow: 1;
  }
}
</style>
